<template>
  <a-layout-sider
      style="flex: 0 0 415px;min-width: 415px;max-width: 415px;width: 415px;background: #ffffff !important;overflow-y:scroll">
    <div class="left-top">
      <div class="logoa1">
        <img src="../../../assets/images/eventAnalyze/1.png"/>
      </div>
      <span>事件追踪</span>
    <!--  <div class="logoa2">
        <div class="logoa2Img" @click="changePageAdd"></div>

        <span style="color: white;font-size: 14px;cursor: pointer;" @click="changePageAdd">添加规则</span>
      </div>-->
      <div class="logoa2">
        <div class="logoa2Img" @click="changePageAdd"></div>

        <span style="color: white;font-size: 14px;cursor: pointer;" @click="changePageAdd">事件创建</span>
      </div>
    </div>


    <div >
      <div style="margin-left: 10%;margin-top: 5%;cursor: pointer;">
        <img :style="collspanQuery0?'display:none':''" src="../../../assets/images/eventAnalyze/5.png" alt="" @click="showQuery0">
        <img :style="collspanQuery0?'':'display:none'" src="../../../assets/images/eventAnalyze/6.png" alt="" @click="showQuery0">
        <span @click="showQuery0" style="margin-left: 3%">全部</span>
      </div>
      <div :style="collspanQuery0?'':'display:none'" style="display: flex">
        <div style="width: 80%;">
          <div style="display:flex">
            <div style="display: flex;width:35%">

              <div style="width: 15%;height: 10%;margin-left: 25%">
                <img src="../../../assets/images/eventAnalyze/2.png" alt="" style="float: right">
              </div>


              <div style="width: 20%;height: 100%;padding-left: 10%;" >
                <img src="../../../assets/images/eventAnalyze/4.png" alt="" style="margin-left: 50%;margin-top: 45%;">
              </div>
            </div>
            <div   style="width:65%;margin-left:-72px;margin-top:-4px">

              <!--第一个下拉-->
              <div style="margin-left: 20%;margin-top: 5%;cursor: pointer;">
                <img :style="collspanQuery5?'display:none':''" src="../../../assets/images/eventAnalyze/5.png" alt="" @click="showQuery5">
                <img :style="collspanQuery5?'':'display:none'" src="../../../assets/images/eventAnalyze/6.png" alt="" @click="showQuery5">
                <span @click="showQuery5" style="margin-left: 3%">自定义事件</span>
              </div>
              <div :style="collspanQuery5?'':'display:none'" style="display: flex">
                <div style="width: 45%;">
                  <div style="display: flex" >
                      <div style="display: flex;width:300%;margin-left:4px">

                          <div style="width: 15%;height: 10%;margin-left: 25%">
                              <img src="../../../assets/images/eventAnalyze/2.png" alt="" style="float: right">
                          </div>

                          <!--
                                        <div style="width: 20%;height: 100%;padding-left: 10%;" >
                                          <img src="../../../assets/images/eventAnalyze/4.png" alt="" style="margin-left: 50%;margin-top: 45%;">
                                        </div>-->
                      </div>
                    <div style="width: 15%;height: 10%;margin-left: 48%">
                      <img src="../../../assets/images/eventAnalyze/2.png" alt="" style="float: right">
                    </div>


                    <div style="width: 20%;height: 100%;padding-left: 10%;" >
                      <img src="../../../assets/images/eventAnalyze/4.png" alt="" style="margin-left: 50%;margin-top: 45%;">
                    </div>
                    <div class="left-item" >
                      <div class="textDiv">
                        <span :style="active==1?'color: rgb(23,119,255)':''" @click="changePage(1)">热点自定义事件</span>
                      </div>
                    <!--  <div class="textDiv">
                        <span :style="active==index+1?'color: rgb(23,119,255)':''" @click="changePage(index+1)">{{item.name}}</span>
                      </div>-->

                      <div style="display: flex;width: 17%;height: 4%;justify-content: space-around;position: absolute;left: 80%"
                           :style="active==1?'':'display: none'"
                      >
                        <div class="search" title="查看规则详情" @click="changePageRuleInfo"></div>
                                        <div class="delete" title="删除" @click="deleteButton"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

            </div>
          </div>
          <div style="display:flex">
          <div style="display: flex;width:35%">

            <div style="width: 15%;height: 10%;margin-left: 25%">
              <img src="../../../assets/images/eventAnalyze/2.png" alt="" style="float: right">
            </div>


            <div style="width: 20%;height: 100%;padding-left: 10%;" >
              <img src="../../../assets/images/eventAnalyze/4.png" alt="" style="margin-left: 50%;margin-top: 45%;">
            </div>
          </div>
            <div   style="width:65%;margin-left:-72px;margin-top:-4px">

      <!--第一个下拉-->
      <div style="margin-left: 20%;margin-top: 5%;cursor: pointer;">
        <img :style="collspanQuery1?'display:none':''" src="../../../assets/images/eventAnalyze/5.png" alt="" @click="showQuery1">
        <img :style="collspanQuery1?'':'display:none'" src="../../../assets/images/eventAnalyze/6.png" alt="" @click="showQuery1">
        <span @click="showQuery1" style="margin-left: 3%">诈骗事件</span>
      </div>
      <div :style="collspanQuery1?'':'display:none'" style="display: flex">



        <div style="width: 45%;">
          <div style="display: flex" v-for="(item,index) in leftList1">
            <div style="display: flex;width:300%;margin-left:4px">

              <div style="width: 15%;height: 10%;margin-left: 25%">
                <img src="../../../assets/images/eventAnalyze/2.png" alt="" style="float: right">
              </div>

<!--
              <div style="width: 20%;height: 100%;padding-left: 10%;" >
                <img src="../../../assets/images/eventAnalyze/4.png" alt="" style="margin-left: 50%;margin-top: 45%;">
              </div>-->
            </div>

            <div style="width: 15%;height: 10%;margin-left: 48%">
              <img src="../../../assets/images/eventAnalyze/2.png" alt="" style="float: right">
            </div>


            <div style="width: 20%;height: 100%;padding-left: 10%;" >
              <img src="../../../assets/images/eventAnalyze/4.png" alt="" style="margin-left: 50%;margin-top: 45%;">
            </div>
            <div class="left-item" >
              <div class="textDiv">
                <span :style="active==index+2?'color: rgb(23,119,255)':''" @click="changePage(index+2)">{{item.name}}</span>
              </div>

              <div style="display: flex;width: 17%;height: 4%;justify-content: space-around;position: absolute;left: 80%"
                   :style="active==index+2?'':'display: none'"
              >
                <div class="search" title="查看规则详情" @click="changePageRuleInfo"></div>
                <div class="delete" title="删除" @click="deleteButton"></div>
              </div>
            </div>
          </div>
        </div>
      </div>

            </div>
          </div>
          <div style="display:flex">
            <div style="display: flex;width:35%">
              <div style="width: 15%;height: 10%;margin-left: 25%">
                <img src="../../../assets/images/eventAnalyze/2.png" alt="" style="float: right">
              </div>


              <div style="width: 20%;height: 100%;padding-left: 10%;" >
                <img src="../../../assets/images/eventAnalyze/4.png" alt="" style="margin-left: 50%;margin-top: 45%;">
              </div>
            </div>
            <div   style="width:65%;margin-left:-72px;margin-top:-4px">

<!--      第二个下拉-->
      <div style="margin-left: 20%;margin-top: 5%;cursor: pointer;">
        <img :style="collspanQuery2?'display:none':''" src="../../../assets/images/eventAnalyze/5.png" alt="" @click="showQuery2">
        <img :style="collspanQuery2?'':'display:none'" src="../../../assets/images/eventAnalyze/6.png" alt="" @click="showQuery2">
        <span @click="showQuery2" style="margin-left: 3%">涉案事件</span>
      </div>
      <div :style="collspanQuery2?'':'display:none'" style="display: flex">


        <div style="width: 45%;">
          <div style="display: flex" v-for="(item,index) in leftList2">
            <div style="display: flex;width:300%;margin-left:4px">

              <div style="width: 15%;height: 10%;margin-left: 25%">
                <img src="../../../assets/images/eventAnalyze/2.png" alt="" style="float: right">
              </div>

              <!--
                            <div style="width: 20%;height: 100%;padding-left: 10%;" >
                              <img src="../../../assets/images/eventAnalyze/4.png" alt="" style="margin-left: 50%;margin-top: 45%;">
                            </div>-->
            </div>
            <div style="width: 15%;height: 10%;margin-left: 48%">
              <img src="../../../assets/images/eventAnalyze/2.png" alt="" style="float: right">
            </div>


            <div style="width: 20%;height: 100%;padding-left: 10%;" >
              <img src="../../../assets/images/eventAnalyze/4.png" alt="" style="margin-left: 50%;margin-top: 45%;">
            </div>
            <div class="left-item" >
              <div class="textDiv">
                <span :style="active==index+leftList1.length+2?'color: rgb(23,119,255)':''" @click="changePage(index+leftList1.length+2)">{{item.name}}</span>
              </div>

              <div style="display: flex;width: 17%;height: 4%;justify-content: space-around;position: absolute;left: 80%"
                   :style="active==index+leftList1.length+2?'':'display: none'"
              >
                <div class="search" title="查看规则详情" @click="changePageRuleInfo"></div>
                <div class="delete" title="删除" @click="deleteButton"></div>
              </div>
            </div>
          </div>
        </div>
      </div>

          </div>
          </div>
          <div style="display:flex">
            <div style="display: flex;width:35%">

              <div style="width: 15%;height: 10%;margin-left: 25%">
                <img src="../../../assets/images/eventAnalyze/2.png" alt="" style="float: right">
              </div>


              <div style="width: 20%;height: 100%;padding-left: 10%;" >
                <img src="../../../assets/images/eventAnalyze/4.png" alt="" style="margin-left: 50%;margin-top: 45%;">
              </div>
            </div>
          <div   style="width:65%;margin-left:-72px;margin-top:-4px">

      <!--第三个下拉-->
      <div style="margin-left: 20%;margin-top: 5%;cursor: pointer;">
        <img :style="collspanQuery3?'display:none':''" src="../../../assets/images/eventAnalyze/5.png" alt="" @click="showQuery3">
        <img :style="collspanQuery3?'':'display:none'" src="../../../assets/images/eventAnalyze/6.png" alt="" @click="showQuery3">
        <span @click="showQuery3" style="margin-left: 3%">意识形态</span>
      </div>

      <div :style="collspanQuery3?'':'display:none'" style="display: flex;">


        <div style="width: 45%;">
          <div style="display: flex" v-for="(item,index) in leftList3">
            <div style="display: flex;width:300%;margin-left:4px">

              <div style="width: 15%;height: 10%;margin-left: 25%">
                <img src="../../../assets/images/eventAnalyze/2.png" alt="" style="float: right">
              </div>

              <!--
                            <div style="width: 20%;height: 100%;padding-left: 10%;" >
                              <img src="../../../assets/images/eventAnalyze/4.png" alt="" style="margin-left: 50%;margin-top: 45%;">
                            </div>-->
            </div>


            <div style="width: 15%;height: 10%;margin-left: 48%">
              <img src="../../../assets/images/eventAnalyze/2.png" alt="" style="float: right">
            </div>


            <div style="width: 20%;height: 100%;padding-left: 10%;" >
              <img src="../../../assets/images/eventAnalyze/4.png" alt="" style="margin-left: 50%;margin-top: 45%;">
            </div>
            <div class="left-item" >
              <div class="textDiv">
                <span :style="active==index+leftList1.length+leftList2.length+2?'color: rgb(23,119,255)':''" @click="changePage(index+leftList1.length+leftList2.length+2)">{{item.name}}</span>
              </div>

              <div style="display: flex;width: 17%;height: 4%;justify-content: space-around;position: absolute;left: 80%"
                   :style="active==index+leftList1.length+leftList2.length+2?'':'display: none'"
              >
                <div class="search" title="查看规则详情" @click="changePageRuleInfo"></div>
                <div class="delete" title="删除" @click="deleteButton"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
            </div>
          </div>

          <div style="display:flex">
            <div style="display: flex;width:35%">

              <div style="width: 15%;height: 10%;margin-left: 25%">
                <img src="../../../assets/images/eventAnalyze/2.png" alt="" style="float: right">
              </div>


              <div style="width: 20%;height: 100%;padding-left: 10%;" >
                <img src="../../../assets/images/eventAnalyze/4.png" alt="" style="margin-left: 50%;margin-top: 45%;">
              </div>
            </div>
            <div   style="width:65%;margin-left:-72px;margin-top:-4px">
      <!--第四个下拉-->
      <div style="margin-left: 20%;margin-top: 5%;cursor: pointer;">
        <img :style="collspanQuery4?'display:none':''" src="../../../assets/images/eventAnalyze/5.png" alt="" @click="showQuery4">
        <img :style="collspanQuery4?'':'display:none'" src="../../../assets/images/eventAnalyze/6.png" alt="" @click="showQuery4">
        <span @click="showQuery4" style="margin-left: 3%">业务负面</span>
      </div>

      <div :style="collspanQuery4?'':'display:none'" style="display: flex;">


        <div style="width: 45%;">
          <div style="display: flex" v-for="(item,index) in leftList4">

            <div style="display: flex;width:300%;margin-left:4px">

              <div style="width: 15%;height: 10%;margin-left: 25%">
                <img src="../../../assets/images/eventAnalyze/2.png" alt="" style="float: right">
              </div>

              <!--
                            <div style="width: 20%;height: 100%;padding-left: 10%;" >
                              <img src="../../../assets/images/eventAnalyze/4.png" alt="" style="margin-left: 50%;margin-top: 45%;">
                            </div>-->
            </div>
            <div style="width: 15%;height: 10%;margin-left: 48%">
              <img src="../../../assets/images/eventAnalyze/2.png" alt="" style="float: right">
            </div>


            <div style="width: 20%;height: 100%;padding-left: 10%;" >
              <img src="../../../assets/images/eventAnalyze/4.png" alt="" style="margin-left: 50%;margin-top: 45%;">
            </div>
            <div class="left-item" >
              <div class="textDiv">
                <span :style="active==index+leftList1.length+leftList2.length+leftList3.length+2?'color: rgb(23,119,255)':''" @click="changePage(index+leftList1.length+leftList2.length+leftList3.length+2)">{{item.name}}</span>
              </div>

              <div style="display: flex;width: 17%;height: 4%;justify-content: space-around;position: absolute;left: 80%"
                   :style="active==index+leftList1.length+leftList2.length+leftList3.length+2?'':'display: none'"
              >
                                <div class="search" title="查看规则详情" @click="changePageRuleInfo"></div>
                                <div class="delete" title="删除" @click="deleteButton"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      </div>
    </div>
      </div>
    </div>
    </div>





<!--      <a-tree-->
<!--              v-model="checkedKeys"-->
<!--              :expanded-keys="expandedKeys"-->
<!--              :auto-expand-parent="autoExpandParent"-->
<!--              :selected-keys="selectedKeys"-->
<!--              :tree-data="treeData"-->
<!--              @expand="onExpand"-->
<!--              @select="onSelect"-->
<!--              show-icon-->
<!--      >-->
<!--        <a-icon slot="switcherIcon" type="down" />-->
<!--        <a-icon slot="smile" type="smile-o" />-->
<!--        <a-icon slot="meh" type="small-dash" />-->
<!--        <a-icon />-->
<!--        <template slot="custom" slot-scope="{ selected }">-->
<!--          <a-icon :type="selected ? 'frown' : 'frown-o'" />-->
<!--        </template>-->
<!--      </a-tree>-->

  </a-layout-sider>
</template>

<script>

  import {shiJianList} from '@/api/eventAnalyze/eventAnalyze'


  const treeData = [
    {
      title: '通用事件',
      key: '0-0',
      children: [
          { title: '互联网诈骗', key: '0-0-0-0',slots: { icon: 'meh' }},
          { title: '运营商网络安全', key: '0-0-0-1' },
          { title: '三大运营商在美退市', key: '0-0-0-2' },
      ],
    },
    {
      title: '涉案事件',
      key: '0-1',
      children: [
        { title: 'APP违法运行事', key: '0-1-0-0' },
        { title: '激获黑卡70吨', key: '0-1-0-1' },
        { title: '运营商断卡涉案', key: '0-1-0-2' },
      ],
    },
    {
      title: '涉诈事件',
      key: '涉诈事件',
      children: [
        { title: '物联网卡诈骗断卡', key: '0-1-0-0' },
        { title: '新型短信诈骗检测', key: '0-1-0-1' },
      ],
    },
  ];



export default {
  name: "eventindex",
  props:["active"],
  data(){
    return {
      expandedKeys: ['0-0', '0-0-1'],
      autoExpandParent: true,
      checkedKeys: ['0-0-0'],
      selectedKeys: [],
      treeData,
      collspanQuery1: false,
      collspanQuery2: false,
      collspanQuery3: false,
      collspanQuery4: false,
      collspanQuery0:true,
      collspanQuery5:false,
      leftList1:[],
      leftList2:[],
      leftList3:[],
      leftList4:[],
    }
  },
  watch: {
    checkedKeys(val) {
      console.log('onCheck', val);
    },
  },
  methods:{

    // 删除事件
    deleteButton(){
      this.$message.success("删除成功");
    },

    // 规则详情页
    changePageRuleInfo(){
      this.$router.push({
        path: "/eventAnalyzecreateinfo",
      })
    },

    showQuery0(){
      this.collspanQuery0 = !this.collspanQuery0;
      localStorage.setItem('collspanQuery0',this.collspanQuery0);
    },
      showQuery1(){
        this.collspanQuery1 = !this.collspanQuery1;
        localStorage.setItem('collspanQuery1',this.collspanQuery1);
      },
      showQuery2(){
        this.collspanQuery2 = !this.collspanQuery2;
        localStorage.setItem('collspanQuery2',this.collspanQuery2);
      },
      showQuery3(){
        this.collspanQuery3 = !this.collspanQuery3;
        localStorage.setItem('collspanQuery3',this.collspanQuery3);
      },
      showQuery4(){
        this.collspanQuery4 = !this.collspanQuery4;
        localStorage.setItem('collspanQuery4',this.collspanQuery4);
      },

    showQuery5(){
      this.collspanQuery5 = !this.collspanQuery5;
      localStorage.setItem('collspanQuery5',this.collspanQuery5);
    },
    changePageAdd(){
      this.$router.push({
        path:'/eventAnalyzecreate',
      })
    },
    changePage(tag){
      let path;
      if (tag==1){
        path = "eventAnalyze";
      }else if (tag ==2){
        path = "eventAnalyze2";
      }else if (tag ==3){
        path = "eventAnalyze3";
      }else if (tag ==4){
        path = "eventAnalyze4";
      }else if (tag ==5){
        path = "involvedEvent2";
      }else if (tag ==6){
        path = "involvedEvent3";
      }else if (tag ==7){
        path = "eventAnalyze7";
      }else if (tag ==8){
        path = "fraudeEvent2";
      }else if (tag ==9){
        path = "eventAnalyze9";
      }else if (tag ==10){
        path = "eventAnalyze10";
      }else if (tag ==11){
        path = "eventAnalyze11";
      }else if (tag ==12){
          path = "involvedEvent";
      }else if (tag ==13){
          path = "fraudeEvent";
      }else if (tag ==14){
        path = "eventAnalyze12";
      }



        this.$router.push({
        path: '/'+path,
      })

    },

    onCheck(checkedKeys) {
      console.log('onCheck', checkedKeys);
      this.checkedKeys = checkedKeys;
    },
    onSelect(selectedKeys, info) {
      console.log('onSelect', info);
      this.selectedKeys = selectedKeys;
    },

  },
  mounted() {
    if(this.active == 1 || this.active == 2 || this.active == 3 || this.active == 4|| this.active == 5|| this.active == 6|| this.active == 7|| this.active == 8|| this.active == 9|| this.active == 10|| this.active == 11){
      this.collspanQuery1 = false;
      // 判断第二个下拉
      console.log('this.collspanQuery2---',localStorage.getItem('collspanQuery2'))
      console.log('this.collspanQuery3---',localStorage.getItem('collspanQuery3'))
      if(localStorage.getItem('collspanQuery5')=='true'){
        this.collspanQuery5 = true
      }else if(localStorage.getItem('collspanQuery5')=='false'){
        this.collspanQuery5 = false
      }
      if(localStorage.getItem('collspanQuery1')=='true'){
        this.collspanQuery1 = true
      }else if(localStorage.getItem('collspanQuery1')=='false'){
        this.collspanQuery1 = false
      }
      if(localStorage.getItem('collspanQuery2')=='true'){
        this.collspanQuery2 = true
      }else if(localStorage.getItem('collspanQuery2')=='false'){
        this.collspanQuery2 = false
      }
      //判断第三个下拉
      if(localStorage.getItem('collspanQuery3')=='true'){
        this.collspanQuery3 = true
      }else if (localStorage.getItem('collspanQuery3')=='false'){
        this.collspanQuery3 = false
      }
      //判断第四个下拉
      if(localStorage.getItem('collspanQuery4')=='true'){
        this.collspanQuery4 = true
      }else if (localStorage.getItem('collspanQuery4')=='false'){
        this.collspanQuery4 = false
      }
    }
    if( this.active == 12 ){
      this.collspanQuery2 =false
        // 判断第一个下拉
        if(localStorage.getItem('collspanQuery1')=='true'){
            this.collspanQuery1 = true
        }else if(localStorage.getItem('collspanQuery1')=='false'){
            this.collspanQuery1 = false
        }
        //判断第三个下拉
        if(localStorage.getItem('collspanQuery3')=='true'){
            this.collspanQuery3 = true
        }else if (localStorage.getItem('collspanQuery3')=='false'){
            this.collspanQuery3 = false
        }
      //判断第四个下拉
      if(localStorage.getItem('collspanQuery4')=='true'){
        this.collspanQuery4 = true
      }else if (localStorage.getItem('collspanQuery4')=='false'){
        this.collspanQuery4 = false
      }
    }
    if(this.active == 13){
      this.collspanQuery3 =false
        // 判断第一个下拉
        if(localStorage.getItem('collspanQuery1')=='true'){
            this.collspanQuery1 = true
        }else if(localStorage.getItem('collspanQuery1')=='false'){
            this.collspanQuery1 = false
        }
        //判断第二个下拉
        if(localStorage.getItem('collspanQuery2')=='true'){
            this.collspanQuery2 = true
        }else if (localStorage.getItem('collspanQuery2')=='false'){
            this.collspanQuery2 = false
        }
        //判断第四个下拉
        if(localStorage.getItem('collspanQuery4')=='true'){
          this.collspanQuery4 = true
        }else if (localStorage.getItem('collspanQuery4')=='false'){
          this.collspanQuery4 = false
        }
    }

    if(this.active == 14){
      this.collspanQuery4 =false
      // 判断第一个下拉
      if(localStorage.getItem('collspanQuery1')=='true'){
        this.collspanQuery1 = true
      }else if(localStorage.getItem('collspanQuery1')=='false'){
        this.collspanQuery1 = false
      }
      //判断第二个下拉
      if(localStorage.getItem('collspanQuery2')=='true'){
        this.collspanQuery2 = true
      }else if (localStorage.getItem('collspanQuery2')=='false'){
        this.collspanQuery2 = false
      }
      //判断第三个下拉
      if(localStorage.getItem('collspanQuery3')=='true'){
        this.collspanQuery3 = true
      }else if (localStorage.getItem('collspanQuery3')=='false'){
        this.collspanQuery3 = false
      }
    }
  },
  destroyed() {

  },
  created() {
    // shiJianList().then(res=>{
    //   this.leftList1 = res.data.data.general;
    //   this.leftList2 = res.data.data.involved;
    //   this.leftList3 = res.data.data.fraud;
    //   this.leftList4 = res.data.data.business;
    //   console.log("leftList1===============",this.leftList1);
    // })
  },
}
</script>

<style scoped lang="scss">
.left-top {
  height: 60px;
  font-size: 16px;
  display: flex;
  align-items: center;
  background-color: rgb(23, 119, 255);
  width: 100%;

  .logoa1 {
    margin: 0 25px 0 25px;
  }
  .logoa2Img{
    width: 20%;
    height: 20%;
    background: url("../../../assets/images/generalDetection/addChart.png") left center no-repeat;
    display: inline-block;
    margin-left: 22%;
    cursor: pointer;
  }
  .logoa2{
    height: 100%;
    width: 25%;
    margin-left: 38%;

  }

  span {
    line-height: 60px;
    color: #ffffff;
  }
}

.left-item {
  height:50px;
  font-size: 14px;
  display: flex;
  margin-left: 15px;
  align-items: center;
  margin-top: -3%;
  span{
    cursor: pointer;
  }
  .suspended{
    background: url("../../../assets/images/generalDetection/suspended.png") left center no-repeat;
    width: 20%;
    height: 100%;
    cursor: pointer;
  }
  .delete{
    background: url("../../../assets/images/generalDetection/delete.png") left center no-repeat;
    width: 20%;
    height: 100%;
    cursor: pointer;
  }
  .search{
    background: url("../../../assets/images/generalDetection/1.png") left center no-repeat;
    width: 20%;
    height: 100%;
    cursor: pointer;
  }
}
  .imgLine{
    margin-top: 4%;
  }
  .textDiv{
    width: 150px;
  }


</style>
